import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { addCar } from '../store/slice/car'
export default function GoodsList() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    let { goodsList } = useSelector(state => state.goods)
    return (
        <div>
            <h3>商品列表</h3>
            <ul>
                {goodsList.map(goods => (
                    <li className="goods" key={goods.id}>
                        <p>商品名称： {goods.gname}</p>
                        <p>商品价格： {goods.price}</p>
                        <p><button onClick={()=>{
                            // 1. 添加购物车
                            dispatch(addCar(goods))
                            // 2. 跳转到购物车列表
                            navigate('/carList')
                        }}>加入购物车</button></p>
                    </li>
                ))}
            </ul>
        </div>
    )
}
